<template>
  <div class="regist_box">
    <van-nav-bar title="注册" left-arrow @click-left="$router.back()" />
    <van-tabs title-active-color="#ff464e">
      <van-tab title="卷皮账号注册">
        <van-cell-group>
          <van-field v-model="from.username" left-icon='manager-o' label="用户名：" placeholder="请输入用户名" />
          <van-field v-model="from.password" left-icon='bag-o' @input="asd" label="密码：" type="password" placeholder="请输入密码">
            <div slot="right-icon">
              <van-tag :color="from.typename"></van-tag>
              <van-tag :color="from.typenames"></van-tag>
              <van-tag :color="from.typenamed"></van-tag>
            </div>
          </van-field>
          <van-field v-model="from.clonepassword" left-icon='bag-o' label="重复密码：" type="password" placeholder="请再次输入密码"></van-field>
        </van-cell-group>
      </van-tab>
    </van-tabs>
    <van-button
      type="danger"
      class="regist_btn"
      :color="this.from.username===''||this.from.password===''||this.from.clonepassword===''? '#dbdbdb':''"
      @click="regist"
      :disabled="this.from.username===''||this.from.password===''||this.from.clonepassword===''"
    >注册</van-button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      from: {
        username: "",
        password: "",
        clonepassword: "",
        typename: "#fff",
        typenames: "#fff",
        typenamed: "#fff"
      }
    };
  },
  methods: {
    regist() {
      if (this.from.password !== this.from.clonepassword) {
        this.$toast("两次密码输入不一致");
        return false
      }
      let formdata = new URLSearchParams();
      formdata.append("username", this.from.username);
      formdata.append("password", this.from.password);
      this.$http.post("/regist", formdata).then(res => {
        if (res.data.code === 201) {
          this.$router.push("/login");
          this.$toast("注册成功");
        } else {
          this.$toast(res.data.error);
        }
      });
    },
    asd(value) {
      if (/^[0-9]{6,16}$|^[a-zA-Z]{6,16}$/.test(value)) { // 全字母或全数组
        this.from.typename = "#FF0000";
        this.from.typenames = "#fff";
        this.from.typenamed = "#fff";
      } else if (/^[A-Za-z0-9]{6,16}$/.test(value)) { // 数字和字母
        this.from.typename = "#FF0000";
        this.from.typenames = "#FFA500";
        this.from.typenamed = "#fff";
      } else if (/^\w{6,16}$/.test(value)) { // 数字字母下划线
        this.from.typename = "#FF0000";
        this.from.typenames = "#FFA500";
        this.from.typenamed = "#00FF7F";
      } else {
        this.from.typename = "#fff";
        this.from.typenames = "#fff";
        this.from.typenamed = "#fff";
      }
    }
  }
};
</script>
<style lang="less">
.regist_box {
  .regist_btn {
    margin: 15px 10px 0px 10px;
    width: 95%;
  }
}
</style>